<template>
  <div>
    <div class="container">
      <div class="content" ref="contentRef">
        <div
          v-for="(item, index) in props.tabs"
          class="item"
          :class="{ active: tabs.currentTab == index }"
          @click="tabs.currentTab = index"
          :data-text="item.title"
        >
          {{ item.title }}
        </div>
        <div class="indicator"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watchEffect } from "vue";
import {onMounted} from "@vue/runtime-core";
const props = defineProps({
  tabs: {
    type: Array,
    default: [{ title: "文章" }, { title: "文章2" }],
  },
});
const contentRef = ref();
// 容器长度
const containerWidth = ref();
//
const indicatorWidth = ref();
onMounted(()=>{
  // 统计总长度 = (标题字数 + 标题个数*2)*14
  // 标题字数
  let titleLength = getByteLen(props.tabs.map(e => e.title).join().replace(",",""));
  // 间隔
  let interval = props.tabs.length * 2;
  containerWidth.value = (interval + titleLength) * 14 + 'px';
  indicatorWidth.value = (titleLength/props.tabs.length) * 14 + 14 + 'px';
})

function getByteLen(val) {
  let len = 0;
  for (let i = 0; i < val.length; i++) {
    let a = val.charAt(i);
    if (a.match(/[^\x00-\xff]/ig) != null) {
      len += 1;
    } else {
      len += 0.5;
    }
  }
  return len;
}
let tabs = reactive({
  currentTab: 0,
});
const emit = defineEmits(["handleChangeCurrentTab"]);

const stopWatch = watchEffect(() => {
  // 向父组件传参
  emit("handleChangeCurrentTab", tabs.currentTab);
});


</script>

<style lang="less" scoped>
.container {
  border-radius: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--tab-background-color);
  height: 30px;
  width: v-bind(containerWidth);
}
.container .content {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  transform-style: preserve-3d;
}
.container .content .item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: var(--primary-font-family);
  font-weight: var(--primary-font-weight);
  transition: transform 2s;
}
.indicator {
  position: absolute;
  width: v-bind(indicatorWidth);
  height: 22px;
  border-radius: 10px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transform: translateZ(-1px);
  background: var(--primary-background-color);
  box-shadow: 0 0 4px var(--primary-background-color),
    0 0 8px var(--primary-background-color);
}



/* 只有一个li元素 */
.container .content .item:only-child {
  width: 100%;
}

/* 有两个li元素 */
.container .content .item:first-child:nth-last-child(3),
.container .content .item:first-child:nth-last-child(3) ~ .item {
  width: calc(100% / 2);
}
.container .content .item:first-child:nth-last-child(3).active ~ .indicator{
  transform: translateX(-58%) translateZ(-1px);
}
.container .content .item:nth-child(2):nth-last-child(2).active ~ .indicator{
  transform: translateX(58%) translateZ(-1px);
}


/* 有三个li元素的第1个元素 */
.container .content .item:first-child:nth-last-child(4) {
  width: calc(100% / 3);
}
/* 移动到第1个元素 */
.container .content .item:first-child:nth-last-child(4).active ~ .indicator
{
  transform: translateX(-128%) translateZ(-1px);
}
/* 有三个li元素的第2个元素 */
.container .content .item:nth-child(2):nth-last-child(3){
  width: calc(100% / 3);
}
/* 移动到第2个元素 */
.container .content .item:nth-child(2):nth-last-child(3).active ~ .indicator
{
  transform: translateX(0px) translateZ(-1px);
}

/* 有三个li元素的第3个元素 */
.container .content .item:nth-child(3):nth-last-child(2){
  width: calc(100% / 3);
}
/* 移动到第3个元素 */
.container .content .item:nth-child(3):nth-last-child(2).active ~ .indicator
{
  transform: translateX(128%) translateZ(-1px);
}

</style>
